<template>
  <div class="box">
    <div class="left">
      <div class="top">
        <span class="text1">Welcome back</span>
        <span class="text2">{{ Time }}  又是元气满满的一天</span>
        <div class="banner">
          <img src="../assets/file12.png" alt="">
        </div>

      </div>
      <tiny-calendar-view :events="eventslist" :year="2024" :month="5"></tiny-calendar-view>

    </div>
    <div class="right">
      <span class="text1">People management</span>
      <img src="../assets/file.jpg" alt="">
      <div class="box1">
        <div class="box2">
          <span class="icon"> <tiny-icon-unfreeze></tiny-icon-unfreeze>
          </span>
          <span style="display: flex;flex-direction: column"> <text>{{number?.managerNumber}}</text>
              <text style="font-size: 10px;color:#A8ABB2">管理员</text>
            </span>
        </div>
        <div class="divider"></div>
        <div class="box3">
          <span class="icon"> <tiny-icon-user></tiny-icon-user>
          </span>
          <span style="display: flex;flex-direction: column"> <text>{{number?.userNumber}}</text>
              <text style="font-size: 10px;color:#A8ABB2">用户</text>
            </span>
        </div>
      </div>

      <div class="list">
        <span style="font-weight: 700">personnel list</span>
        <div class="item" v-for="(item,index) in list" :key="index">
          <img src="../assets/file5.jpg" alt="">
          <span style="display: flex;flex-direction: column">
            <text style="font-size: 14px;letter-spacing: 2px">{{item.name}}</text>
            <span >
        <tiny-tag type="" size="mini" effect="plain" style="margin-right: 10px;">
          {{item.authority}}
    </tiny-tag>
               <tiny-tag type="success"  size="mini" effect="plain">
        {{ item.sex==1?'男':'女' }}
    </tiny-tag>
            </span>
          </span>
        </div>

      </div>
    </div>
  </div>


</template>

<script setup>
import {ref,inject,onMounted} from 'vue'
import time from "../utils/time.js"
import {
  IconUnfreeze,
  IconUser
} from '@opentiny/vue-icon'

const axios =  inject("axios")
const TinyIconUnfreeze = IconUnfreeze()
const TinyIconUser = IconUser()
const Time = time()
import {CalendarView as TinyCalendarView, Notify} from '@opentiny/vue'
import {Tag as TinyTag} from '@opentiny/vue'
const number = ref({
  managerNumber:0,
  userNumber:0
})
const getNotice = ()=>{
  axios.get("/notice").then(res=>{
    eventslist.value = res.data.data
  }).catch(err=>{
    Notify({
      message: '网络错误',
      type: 'error',
      position: 'top-right'
    })
  })
}
const eventslist =ref([])
const list = ref([])
onMounted(()=>{
  getNUmber()
  getNotice()
})
const getNUmber = ()=>{
  axios.get("/user/list").then(res=>{
   list.value= res.data.data
    window.localStorage.setItem('number',list.value.length)
    number.value.managerNumber = list.value.filter(item=>item.authority=='管理员').length
    number.value.userNumber = list.value.filter(item=>item.authority=='用户').length
  }).catch(err=>{
    Notify({
      message: '网络错误',
      type: 'error',
      position: 'top-right'
    })
  })
}

</script>

<style scoped lang="less">
.top {
  display: flex;
  flex-direction: column;

  .text1 {
    color: #096dd9;
    font-size: 20px;
    font-weight: 600;
    margin: 0 20px;
    margin-top: 20px;
  }

  .text2 {
    color: #A8ABB2;
    font-size: 12px;
    letter-spacing: 1px;
    margin: 2px 20px
  }

  img {
    width: 60vw;
    height: 25vh;
    margin: 30px;
    border-radius: 10px
  }

}

.box {
  width: 100%;
  display: flex;

}

.left {
  width: 65vw;
}

.right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #ffffff;

  .text1 {
    font-weight: 800;
    margin: 20px;
    display: block;
  }

  img {
    width: 150px;
    height: 150px;
    border-radius: 50%;

  }

  .box1 {
    display: flex;
    justify-content: space-between;
    background-color: #F5F7FA;
    width: 220px;
    padding: 10px;
    align-items: center;
    border-radius: 10px;

    .icon {
      display: block;
      width: 30px;
      height: 30px;
      background-color: #ffffff;
      text-align: center;
      border-radius: 50%;
      margin-right: 10px;
    }

    .tiny-svg {
      fill: orange;
      font-size: 14px;
      line-height: 30px;
    }

    .box2, .box3 {
      display: flex;
    }

    .box3 .tiny-svg {
      fill: #32b90d;
      font-size: 14px;
      line-height: 30px;
    }

    .divider {
      width: 2px;
      height: 80%;
      background-color: #E4E7ED;
    }
  }

  .list {
    padding: 10px;
    width: 220px;
    background-color: #F5F7FA;
    margin-top: 10px;
    border-radius: 10px;
  }

  .item {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;


    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 5px;
    }
  }
}

</style>